<template>
  <view class="pages">
    <view class="info" v-for="item,index in details" :key="index">
      <view class="lef"
        ><view>{{item.title}}</view>
        <p>{{item.createtime}}</p></view
      >
      <view class="rig" :class="item.type==1?'red':'green'"> {{item.type==1?'+':'-'}}{{item.exp}}经验 </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
		details:[],
		total:0,
		params:{}
	}
  },
  onReachBottom() {
  	if(this.details.length<this.total){
		this.params.page ++
		this.getList()
	}
  },
  onPullDownRefresh(){
	  this.params.page = 1
	  this.getList()
	  uni.hideNavigationBarLoading()
  },
  onLoad(){
	  this.getList()
  },
  methods:{
	  getList(more){
		  this.rq.getData('spread/experience',this.params).then(res=>{
			  this.total = res.data.total
			  this.details = more?[...this.details,...res.data.data]:res.data.data
			  uni.stopPullDownRefresh()
		  }).catch(()=>{
			   uni.stopPullDownRefresh()
		  })
	  },
  },
};
</script>

<style lang="scss" scoped>
.pages {
  background: #f8f8f8;

  .info {
    padding: 20rpx;
    justify-content: space-between;
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 25rpx;
    margin: 20rpx;
    .lef {
		view{
			font-size: 28rpx;
			font-weight: bold;
		}
      p {
        font-size: 26rpx;
        color: #999999;
        margin-top: 10rpx;
      }
    }
    .rig {
      color: #fe7580;
	  
	  &.green{
		  color: #34C759;
	  }
    }
  }
}
</style>
